<template>
  <div class="app-container home">
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>饼状图示例</span>
            <span style="float: right; padding-bottom: 5px">
              <el-select v-model="checkYear" size="small" placeholder="请选择年份">
                <el-option label="2025" value="2025"></el-option>
                <el-option label="2024" value="2024"></el-option>
                <el-option label="2023" value="2023"></el-option>
              </el-select>
              <el-button style="margin-left: 10px" type="text" @click="getDataByCheckYear">查询</el-button>
            </span>
          </div>
          <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
          <div ref="leftChart" style="width: 100%;height:400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import ImagePreview from "@/components/ImagePreview/index.vue";

export default {
  name: 'PieChartComponent',
  data() {
    return {
      checkYear: '2025',
      leftChart: null,
      // 图表配置项
      chartOption: {
        title: {
          text: '网站访问来源',
          subtext: '2025年统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' },
              { value: 300, name: '视频广告' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  methods: {
    // 根据选择的年份获取数据并更新图表
    getDataByCheckYear() {
      // 这里可以根据选择的年份发起请求获取数据
      // 这里使用模拟数据演示
      const yearData = {
        '2025': [
          { value: 1200, name: '搜索引擎' },
          { value: 800, name: '直接访问' },
          { value: 650, name: '邮件营销' },
          { value: 520, name: '联盟广告' },
          { value: 350, name: '视频广告' }
        ],
        '2024': [
          { value: 900, name: '搜索引擎' },
          { value: 650, name: '直接访问' },
          { value: 500, name: '邮件营销' },
          { value: 420, name: '联盟广告' },
          { value: 280, name: '视频广告' }
        ],
        '2023': [
          { value: 750, name: '搜索引擎' },
          { value: 580, name: '直接访问' },
          { value: 450, name: '邮件营销' },
          { value: 380, name: '联盟广告' },
          { value: 220, name: '视频广告' }
        ]
      };

      // 更新图表数据
      this.chartOption.series[0].data = yearData[this.checkYear];
      this.chartOption.title.subtext = `${this.checkYear}年统计`;
      this.leftChart.setOption(this.chartOption);
    },

    // 初始化图表
    initChart() {
      // 使用ref获取DOM元素，更符合Vue的做法
      this.leftChart = echarts.init(this.$refs.leftChart);
      // 设置图表的配置项和数据
      this.leftChart.setOption(this.chartOption);
    },

    // 处理窗口大小变化，重绘图表
    handleResize() {
      if (this.leftChart) {
        this.leftChart.resize();
      }
    }
  },
  mounted() {
    // 确保DOM渲染完成后再初始化图表
    this.$nextTick(() => {
      this.initChart();
      // 监听窗口大小变化
      window.addEventListener('resize', this.handleResize);
    });
  },
  beforeDestroy() {
    // 组件销毁时，销毁图表实例，释放资源
    if (this.leftChart) {
      this.leftChart.dispose();
      this.leftChart = null;
    }
    // 移除事件监听
    window.removeEventListener('resize', this.handleResize);
  }
}
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}
.app-container {
  padding: 20px;
}
</style>
